<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
            .arrow {
                width:0; 
                height:0; 
                position: absolute;
                top:0;
                left:0;
                display: inline-block;
            }
            .arrow-down {
                border-left:5px solid transparent;
                border-right:5px solid transparent;
                border-top:5px solid #f63;
            }
            .arrow-up {
                border-bottom:5px solid #f63;
                border-left:5px solid transparent;
                border-right:5px solid transparent;
                top:50px;
            }
            .arrow-left {
                border-top:5px solid transparent;
                border-bottom:5px solid transparent; 
                border-right:5px solid #f63; 
                top:100px;
            }
            .arrow-right {
                border-top:5px solid transparent;
                border-bottom:5px solid transparent; 
                border-left:5px solid #f63; 
                top:150px;
            }
        </style>

</head>
<body>
	<div class="container">
            <div class="demo">
                <h2 class="title">css制作上下左右箭头</a></h2>
                <div style="position: relative">
                    <span class="arrow arrow-down"></span>
                    <span class="arrow arrow-up"></span>
                    <span class="arrow arrow-left"></span>
                    <span class="arrow arrow-right"></span>
                </div>
            </div>
        </div>

</body>
</html>